<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>跟单数据</title>
</head>
<body>
<!--查询条件框-->
<form class="layui-form" action="" style="padding-top: 20px;" id="sdsConForm">
</form>

<!--按钮框-->
<div class="layui-row">
    <div class="layui-col-xs12" id="sdsBtnForm" style="margin-left: 40px;margin-bottom: 15px;">
    </div>
</div>

<!--列表-->
<div class="layui-tab" lay-filter="stateTab">
    <ul class="layui-tab-title">
        <li class="layui-this">列表</li>
        <li>柱状图</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <table class="layui-hide" id="sdsTable"></table>
        </div>
        <div class="layui-tab-item">
            <div id="rptDiv" style="width: 100%;height: 800px;">
        </div>
    </div>
</div>


<!-- 你的 HTML 代码 -->
<script>
    layui.use(['http', 'shopx', 'form', 'pub', 'table', 'element'], function () {
        var http = layui.http
            , shopx = layui.shopx
            , form = layui.form
            , pub = layui.pub
            , table = layui.table
            , $ = layui.$;

        var prefix = "sds";
        var elements = {
            name: prefix,
            controlName: 'cmSend',
            //表主键
            keyId: 'cmsId',
            //页面元素前缀，按配置，施工等模块定义
            prefix: 'cm3',
            //page标题
            title: "跟单",
            //查询列表接口
            qryUrl: '/cmSend/selectSendStateRpt',
            //查询条件
            conName: 'sdsConForm',
            //按钮
            btnName: 'sdsBtnForm',
            //表格id
            tableName: 'sdsTable',
            //表主键
            keyId: 'cmsId',
            //排序
            orderBy: " delayCnt desc",
            //是否分页
            ifPage:false,
            //默认初始化查询条件
            addModel: {
                // dictCode:"DEDUCTION_FLAG"
            },
            //查询条件 label#id#类型
            //注意：如果类型是dict 则用:分割 [0]是id [1]是dictCode,[2]是类型（t1：普通下拉框；t2:搜索下拉框；t3:多选搜索下拉框）
            //注意：如果类型是sel 则用:分割 [0]是id [1]是类型（t1：普通下拉框；t2:搜索下拉框；t3:多选搜索下拉框）
            conArray: [
                "品牌方|brand:MATERIAL_SEND_TYPE:t1|DICT|N",
                "开工日期|startBegDt:startEndDt:d2|RDT",
                "店铺|orgId:t2|SEL",
            ],
            //按钮 id#名称#类型#图标#是否权限控制
            btnArray: [
                prefix + 'QueryBtn|查询|primary|&#xe615;|N',
            ],

            //表格列
            cols: [
                [
                    {field: 'brand', title: '品牌',width: '40%'}
                    , {field: 'unActiveCnt', title: '未开工', width: '20%',sort: true}
                    , {field: 'delayCnt', title: '未延期', width: '20%',sort: true}
                    , {field: 'normalCnt', title: '已延期', width: '20%',sort: true}
                ]
            ],
            beforeQueryFunc:function(){
                showEchart();
            }
        }

        var page = shopx.genPage(elements);
        //展示菜单
        shopx.genCond(page);
        //展示按钮
        shopx.genBtn(page);
        //展示有权限的按钮
        shopx.eleAuthShow(http.getUserFunc());

        //初始化分页查询 其中addModel是初始化查询条件
        http.initPage(page);
        http.qryOrgList({}, "q_cm3_orgId");

        showEchart();

        layui.element.on('tab(stateTab)', function(data){
            if(data.index==1){
                showEchart();
            }
        });
    });

    function showEchart(){
        var qryModel = layui.pub.getFormObject('sdsConForm', 'q_cm3_');
        layui.http.postRequest("/cmSend/selectSendStateRpt", 'POST', qryModel, function suc(data) {
            // console.info(JSON.stringify(data));
            var rptArray = new Array();
            var brandArray = new Array();
            brandArray[0]='跟单状态';
            brandArray[1]='未开始';
            brandArray[2]='未延期';
            brandArray[3]='已延期';
            rptArray[0]=brandArray;


            var i=1;
            layui.jquery(data.rspData.data).each(function (idx, item) {
                var stateArray = new Array();
                stateArray[0]=item.brand;
                stateArray[1]=item.unActiveCnt;
                stateArray[2]=item.delayCnt;
                stateArray[3]=item.normalCnt;
                rptArray[i] = stateArray;
                i++;
            });

            var myChart = echarts.init(document.getElementById('rptDiv'));
            var option = {
                legend: {},
                tooltip: {},
                dataset: {
                    source: rptArray
                },
                xAxis: { type: 'category',axisLabel: {
                        rotate: 45  // 旋转角度
                    } },
                yAxis: {},
                // Declare several bar series, each will be mapped
                // to a column of dataset.source by default.
                series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
            };
            myChart.setOption(option);
            myChart.resize();
        }, null, false, false);
    }



</script>
</body>
</html>